<template>
    <div id="map" class="container"></div>
</template>

<script>
import {onMounted} from "vue";
import MapLayerConst from "@/const/MapLayerConst"
import MaptalksUtil from "@/utils/Maptalks.util"

export default {
    name: "Maptalks.component",
    props: {
        mapOnLoadCB: {
            required: false,
            type: Function,
            default: () => {
            }
        }
    },
    setup(props) {

        onMounted(() => {
            let map = new maptalks.Map("map", {
                center: window.$config.center,
                zoom: window.$config.zoom,
                minZoom: window.$config.minZoom,
                maxZoom: window.$config.maxZoom,
                baseLayer: new maptalks.TileLayer(MapLayerConst.MAP_BASE_LAYER, Object.assign({
                    cssFilter: window.$config.theme.default
                }, window.$config.baseLayerOptions)),
            })

            props.mapOnLoadCB(map, new MaptalksUtil(map));
        })
    }
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100%;
    /deep/ .maptalks-control {
        display: none;
    }
}
</style>
